<template>
  <Layout>
    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div class="max-w-md w-full space-y-8">
        <div>
          <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
            登录账户
          </h2>
          <p class="mt-2 text-center text-sm text-gray-600">
            或
            <Link href="/register" class="font-medium text-blue-600 hover:text-blue-500">
              注册新账户
            </Link>
          </p>
        </div>
        <form class="mt-8 space-y-6" @submit.prevent="submit">
          <div class="rounded-md shadow-sm -space-y-px">
            <div>
              <label for="email" class="sr-only">邮箱地址</label>
              <input
                id="email"
                v-model="form.email"
                type="email"
                required
                class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                placeholder="邮箱地址"
              />
            </div>
            <div>
              <label for="password" class="sr-only">密码</label>
              <input
                id="password"
                v-model="form.password"
                type="password"
                required
                class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                placeholder="密码"
              />
            </div>
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input
                id="remember"
                v-model="form.remember"
                type="checkbox"
                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label for="remember" class="ml-2 block text-sm text-gray-900">
                记住我
              </label>
            </div>
          </div>

          <div>
            <button
              type="submit"
              :disabled="form.processing"
              class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              {{ form.processing ? '登录中...' : '登录' }}
            </button>
          </div>

          <div v-if="$page.props.errors.email" class="text-red-600 text-sm">
            {{ $page.props.errors.email }}
          </div>
        </form>
      </div>
    </div>
  </Layout>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'
import { Inertia } from '@inertiajs/inertia'
import Layout from '../../Components/Layout.vue'

export default {
  name: 'Login',
  components: {
    Layout,
    Link
  },
  data() {
    return {
      form: {
        email: '',
        password: '',
        remember: false,
        processing: false
      }
    }
  },
  methods: {
    submit() {
      this.form.processing = true
      Inertia.post('/login', {
        email: this.form.email,
        password: this.form.password,
        remember: this.form.remember
      }, {
        onFinish: () => {
          this.form.processing = false
        }
      })
    }
  }
}
</script>